<template>
  <LdbpPage
    pageName="kjtz"
    zh_name="空间拓展"
    :rankList_title="rankList_title"
    :rankList_th="rankList_th"
    :rankList_4="rankList_4"
    :rankList_6="rankList_6"
    :rankList_8="rankList_8"
    :info="info"
  ></LdbpPage>
</template>

<script>
import axios from 'axios'
import LdbpPage from '../../components/LdbpPage'

export default {
  name: 'Kjtz',
  components: { LdbpPage },
  data() {
    return {
      info: '空间拓展大比拼包括低效工业用地再开发（工业功能区改造提升）、土地收储、土地整治三项内容。',
      rankList_title: ['土地收储榜', '土地整治榜', '低效再开发榜'],
      rankList_th: [
        ['', '', '进度情况'],
        ['', '', '进度情况'],
        ['', '', '进度情况']
      ],
      rankList_4: [],
      rankList_6: [],
      rankList_8: [],
      // bipinDetails: 
      // // 数组中放对象，下例为 空间拓展的比拼详情
      // // 每个比拼的详情都不一样，不过都是 比较榜数的形式
      // [
      //   {
      //     name: '土地收储榜',
      //     red: 7, // 红榜
      //     yellow: 2, // 黄榜
      //     green: 12, // 无榜
      //     black: 0 // 黑榜
      //   },
      //   {
      //     name: '土地整治榜',
      //     red: 3,
      //     yellow: 3,
      //     green: 15,
      //     black: 0
      //   },
      //   {
      //     name: '低效再开发榜',
      //     red: 3,
      //     yellow: 0,
      //     green: 18,
      //     black: 0
      //   }
      // ],
      // listProgress: {
      //   percent: 21, // 图中心的红榜率 (注意：去掉小数，去掉百分号%)
      //   total: 63, // 总数
      //   red: 13, // 红榜数
      //   yellow: 5, // 黄榜数
      //   green: 45 // 无榜数
      // }
    };
  },
  mounted() {
    // 四月
    this.request('1', '4', 0) // 土地收储榜 (榜单类型, 月份, 数据存放索引)
    this.request('2', '4', 1) // 土地整治榜
    this.request('3', '4', 2) // 土地整治榜
    // 六月
    this.request('1', '6', 0)
    this.request('2', '6', 1)
    this.request('3', '6', 2)
    // 八月
    this.request('1', '8', 0)
    this.request('2', '8', 1)
    this.request('3', '8', 2)
  },
  methods: {
    request(type, month, index) {
      // 月份参数处理
      let newMonth;
      if (month === '6') {
        newMonth = '5-6'
      }
      if (month === '8') {
        newMonth = '7'
      }
      axios({
        method: 'post',
        url: 'https://lst.jiande.gov.cn:8443/competition_jiande/SpatialExp/getLandStorageList',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        params: { type, month: newMonth || month }
      })
        .then(({data: {data}}) => {
          console.log('res', month, data);
          if (data) {
            this['rankList_' + month][index] = data
          }
        })
        .catch(err => {
          console.log('err', err);
        });
    }
  }
};
</script>